<template>
  <div class="axiom-notification-provider">
    <transition-group name="axiom-notification-fade" tag="div">
      <AxiomNotification
        v-for="notification in notifications"
        :key="notification.id"
        v-bind="notification"
        @close="removeNotification(notification.id)"
      />
    </transition-group>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useNotificationStore } from '../../stores/notification';
import AxiomNotification from './AxiomNotification.vue';

defineOptions({
  name: 'AxiomNotificationProvider'
});

const store = useNotificationStore();

const notifications = computed(() => store.notifications);

const removeNotification = (id) => {
  store.remove(id);
};
</script> 